<template>
      <div class="container" :style="{width:innerWidth+'px',height:innerHeight+'px'}">
      <!-- 在这里添加你的内容 -->
         <myheader />
         <!-- echarts图    -->
         <div class="bottom-contain">
           <leftcontain :leftData="leftData" @titleHandler="titleHandler($event)"/>
           <centercontain :divData="centerData"  @showDig="showDig($event)" />
           <rightcontain :rightData="rightData" @titleHandler="titleHandler($event)"/>
         </div>
          <!-- title弹窗    -->
         <digmy :diogShow="diogShow" :propOption="titleValue.propOption" :title="titleValue.title"
          @propChange="propChange($event)" @closeHandler="closeHandler($event)" :times="titleValue.times"
          @timeChange="timeChange($event)">
            <!-- 具名插槽 -->
            <div slot="bodys" style="width: 100%;height: 100%;">
                <!-- IOT设备 -->
                <dig-ltwo v-if="titleValue.title == 'IOT设备'" :typeValue="dataInfo.type"/>
                <!-- 园区动态 -->
                <dig-lthree v-if="titleValue.title == '园区动态'" :values="leftData.bottom"/> 
                <!-- 专家服务 -->
                <dig-rone v-if="titleValue.title == '专家服务'"/>
                <!-- 种植面积 -->
                <dig-rtwo v-if="titleValue.title == '种植面积'" :typeValue="dataInfo"/>
                <!-- 价格趋势 -->
                <dig-rthree v-if="titleValue.title == '价格趋势'" :values="dataInfo"/>
            </div>
        </digmy>
        <!-- //链接 -->
        <div v-if="digShow" class="dig-box">
               <div class="close-box"><img src="./assets/closeIcon.png" alt="" @click="closeDig"></div>
               <iframe v-if="digShow" :src="activeUrl" frameborder="0" style="width:100%;height: 100%;"></iframe>
          </div>
      </div>
</template>

<script>
import leftcontain from './view/leftcontain.vue';
import rightcontain from './view/rightcontain.vue';
import centercontain from './view/centercontain.vue';
import myheader from './view/myheader.vue';
import digmy from './components/digmy.vue';
import {setHtmlSize,debounce} from './components/flexible.js' 
export default {
  components: {
    leftcontain,rightcontain,centercontain,digmy,myheader,
    digLtwo:() => import("./view/digLtwo.vue"),
    digLthree:() => import("./view/digLthree.vue"),
    digRone:() => import("./view/digRone.vue"),
    digRtwo:() => import("./view/digRtwo.vue"),
    digRthree:() => import("./view/digRthree.vue"),
  },
  data(){
    return{
      innerWidth:0,
      innerHeight:0,
      digShow:false,
      activeUrl:"http://grove.cpzsyun.com:81/bg/?companyId=4028814b8b1d696f018b8a2c9a260008",
      leftData: {
        top: {},
        center: {},
        bottom: []
      },
      rightData: {
        top: [],
        center: [],
        bottom: []
      },
      centerData:[],
      diogShow: false,//弹窗开关
      titleValue: {//dig传值
        title: "",//标题
        propOption: [],//类
        times: false//是否需要时间选择
      },
      dataInfo:{// 弹窗参数
        name:"",
        type:"",
        startTime: "",
        endTime: ""
      } 
    }
  },
  mounted() { 
    setHtmlSize()
    this.innerWidth = window.innerWidth
    this.innerHeight = window.innerHeight
    window.addEventListener('resize',debounce(()=>{
      location.reload()
    },600))
    this.getData()
  },
  methods:{
    async getData(){
      try{
        let {data:res} = await this.$https.get('plant/iot/getHomeData')
        // console.log(res)
        if (res.code != 200) return 
        this.leftData.top = {
          normalFruitNum: res.data.normalFruitNum,// 普通果园数量
          wisdomFruitNum: res.data.wisdomFruitNum,// 智慧果园数量
          compFruitNum: res.data.compFruitNum,// 公司 数量
          cooperativeNum: res.data.cooperativeNum, // 合作社 数量
          person: res.data.person,//私人数量
       }
        this.leftData.center = {
          coverCompNum: res.data.coverCompNum, // 覆盖企业数
          coverCompNumRatio: res.data.coverCompNumRatio, // 入网企业覆盖数
          devTotal: res.data.devTotal,// 设备总数
          onlineRatio: res.data.onlineRatio,// 在线占比
          alarmDevNum: res.data.alarmDevNum,/// 预警设备数
          alarmNum: res.data.alarmNum// 预警信息数量
       }
       this.leftData.bottom = res.data.news
       this.rightData.top = res.data.expertTypeMap
      this.rightData.center = res.data.plantRatioList
      this.rightData.bottom = res.data.sale
      this.centerData = res.data.fruitComp
      }catch(err){
        console.log(err)
      }
    },
    //弹出弹窗
    titleHandler(e) {
      this.titleValue = e;
      this.resetInfo();
      this.diogShow = true;
      if (this.titleValue.title == '价格趋势') {
          this.dataInfo.type = this.titleValue.propOption[0].value
      }
    },
    //弹窗点击分类
    propChange(e) {
      this.dataInfo.type = e
    },
    //弹窗点击时间范围
    timeChange(e) {
      this.dataInfo.startTime = e.startTime
      this.dataInfo.endTime = e.endTime
      if (this.titleValue.title == '价格趋势') { //价格趋势 时间和类型只能存在一个
        if (!this.dataInfo.startTime) {
          this.dataInfo.type = this.titleValue.propOption[0].value
        } else {
          this.dataInfo.type = ""
        }
      }
    },
    //弹窗 关闭点击
    closeHandler(e) {
      this.resetInfo();
      this.diogShow = e;
    },
    //展示果园二期echarts
    showDig(e){
          console.log(e)
          this.activeUrl = e
          this.digShow = true
    },
    //关闭
    closeDig(){
      this.innerWidth = window.innerWidth
    this.innerHeight = window.innerHeight
      this.digShow = false
    },
   
    //重置参数
    resetInfo(){
      this.dataInfo = {// 弹窗参数重置
        name:"",
        type:"",
        startTime: "",
        endTime: ""
      };
    }
  }
};
</script>

<style lang="less">
.container {
  position: relative;
  display: flex;
  flex-direction: column;
  background-image: url('./assets/20231123102931.png');
  background-size: 100% 100%;
  .dig-box{
    width: 100%;
    height: 100%;
    z-index: 9998;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    .close-box{
      width: 25px;
      height: 40px;
      display: flex;
      justify-content: right;
      align-items: center;
      position: absolute;
      right: 300px;
      top: 20px;
      img{
        width: 25px;
        height: 25px;
        margin-right: 20%;
        cursor: pointer;
      }
    }
  }
  .bottom-contain{
    width: 100%;
    flex: 1;
    display: flex;
    z-index: 2;
  }
}
// 阴影
.container::after{
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(90deg, #000403 0%, rgba(0, 5, 4, 0.9) 9%, rgba(0, 5, 4, 0.2) 51%, rgba(0, 5, 4, 0.2) 51%, #000504 91%, #000504 100%);
  opacity: 0.9;
  z-index: 1;
}
.echartTitles {
    width: 100%;
    height: 40px;
    background-image: url("./assets/navtitle.png");
    background-size: 100% 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    cursor: pointer;
    .title-name {
        padding-left: 40px;
        padding-bottom: 15px;
        font-size: 18px;
        font-weight: bold;
        font-style: italic;
        color: #FFFFFF;
        text-shadow: 0px 2px 4px rgba(5, 55, 7, 0.42);
    }
}
</style>